<template>
	<view style="padding-top: 20upx;">
		<view class="webkit list angle" @click="jump" data-src="face/face">
			<image :src="src||avatar" style="width: 100upx;height: 100upx;margin-right: 24upx;"></image>
			<view class="mid flex" v-cloak>{{nickname||nickname1}}</view>
		</view>
		<view class="webkit list angle mt" @click="jump" data-src="../bind/bind">
			<view class="title">手机号</view>
			<view class="flex" v-cloak>{{mobile}}（已绑定）</view>
			<view class="right">更换绑定</view>
		</view>
		<view class="webkit list angle mt" @click="jump" data-src="../paypwd/paypwd">
			<view class="title">支付密码</view>
			<view class="flex" v-if="paypwd == ''">未设置支付密码</view>
			<view class="flex" v-else>已设置支付密码</view>
			<view class="right" v-if="paypwd == ''">设置</view>
			<view class="right" v-else>修改</view>
		</view>
		<view class="webkit list mt bb">
			<view class="title">姓名</view>
			<input type="text" :value="realname" @blur="realnameIpt" class="flex" />
		</view>
		<view class="webkit list mt bb">
			<view class="title">身份证号</view>
			<input type="text" :value="idcard" @blur="idcardIpt" class="flex" />
		</view>
		<view class="webkit list bb">
			<view class="title">微信号</view>
			<input type="text" :value="weixin" @blur="weixinIpt" placeholder="请输入您的微信号" class="flex"/>
		</view>
		<view class="webkit list bb" style="padding-top: 0;padding-bottom: 0;">
			<view class="title" style="line-height: 78upx;">出生日期</view>
			<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange" class="flex" style="padding: 0;">
				<view class="uni-input" v-cloak>{{date}}</view>
			</picker>
			
		</view>
		<view class="webkit list">
			<view class="title">所在城市</view>
				<button type="default" @click="showMulLinkageTwoPicker" class="flex cityp" v-cloak>{{pickerText}}</button>
		</view>
		<view style="padding: 0 24upx;">
			<button type="primary" class="layout" style="background-color: #05052B;" @click="submit">确认修改</button>
		</view>
		<mpvue-picker :themeColor="themeColor" ref="mpvuePicker" :mode="mode" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
		 @onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker>
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
		 @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
	</view>
</template>

<script>
	import mpvuePicker from '../../../components/mpvue-picker/mpvuePicker.vue';
	import mpvueCityPicker from '../../../components/mpvue-citypicker/mpvueCityPicker.vue'
	import cityData from '../../../common/city.data.js';
	export default {
		components: {
			mpvuePicker,
			mpvueCityPicker
		},
		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
				nickname1:'游客',
				avatar:'../../../static/missing-face.png',
				res:[],
				date: currentDate,
				src:'',
				nickname:'',
				mobile:"",
				paypwd:"",
				realname:"",
				weixin:'',
				idcard:'',
				mulLinkageTwoPicker: cityData,
				cityPickerValueDefault: [0, 0, 1],
				themeColor: '#007AFF',
				pickerText: '',
				mode: '',
				deepLength: 1,
				pickerValueDefault: [0],
				pickerValueArray:[],
				data:[],
				birthyear:'',
				birthmonth:'',
				birthday:'',
				province:'',
				city:'',
				datavalue:'',
				openid:""
			};
		},
		computed: {
			startDate() {return this.getDate('start')},
			endDate() {return this.getDate('end')}
		},
		onLoad:function(){
			uni.showLoading()
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data
					this.setAjax()
				},
				fail: () => {
					uni.navigateTo({
						url: '../../login/login'
					});
				}
			});
		},methods:{
			setAjax(){
				uni.request({
					url: 'http://mall.zhongzhengyicai.com/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.info&app=1',
					method: 'POST',
					data: {'openid':this.openid},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						uni.hideLoading()
						this.res = res.data
						this.date = res.data.member.birthday
						this.src = res.data.member.avatar
						this.nickname = res.data.member.nickname
						this.mobile = res.data.member.mobile
						this.paypwd = res.data.member.paypwd
						this.realname = res.data.member.realname
						this.weixin = res.data.member.weixin
						this.idcard = res.data.member.idcard
						var time = res.data.member.birthday
						time = time.split('-')
						this.birthyear = time[0]
						this.birthmonth = time[1]
						this.birthday = time[2]
						this.datavalue = res.data.member.datavalue
						if(res.data.member.datavalue != ''){
							this.pickerText = res.data.member.province + '-'+res.data.member.city
						}
						this.province = res.data.member.province
						this.city = res.data.member.city
					},
					fail: () => {},
					complete: () => {}
				});
			},
			realnameIpt(e){
				this.realname = e.detail.value
			},
			weixinIpt(e){
				this.weixin = e.detail.value
			},
			idcardIpt(e){
				this.idcard = e.detail.value
			},
			onCancel(e) {
			},
			showMulLinkageTwoPicker() {
				this.pickerValueArray = this.mulLinkageTwoPicker
				this.mode = 'multiLinkageSelector'
				this.deepLength = 2
				this.pickerValueDefault = [0, 0]
				this.$refs.mpvuePicker.show()
			},
			bindDateChange: function(e) {
				this.date = e.target.value
				var time = e.target.value
				time = time.split('-')
				this.birthyear = time[0]
				this.birthmonth = time[1]
				this.birthday = time[2]
			},
			jump(e){
				uni.navigateTo({
					url: e.currentTarget.dataset.src
				});
			},
			onConfirm(e) {
				this.pickerText = e.label
				var label = e.label
				label = label.split('-')
				this.datavalue = e.value[0] + ' ' + e.value[1]
				this.province = label[0]
				this.city =  label[1]
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			submit(){
			uni.showLoading()
				var data = {
					'openid':this.openid,
					'memberdata[realname]': this.realname,
					'memberdata[weixin]': this.weixin,
					'memberdata[idcard]': this.idcard,
					'memberdata[birthyear]': this.birthyear,
					'memberdata[birthmonth]': this.birthmonth,
					'memberdata[birthday]': this.birthday,
					'memberdata[province]': this.province,
					'memberdata[city]': this.city,
					'memberdata[datavalue]': this.datavalue,
					'mcdata[realname]': this.realname,
					'mcdata[birthyear]':this.birthyear,
					'mcdata[birthmonth]':this.birthmonth,
					'mcdata[birthday]':this.birthday,
					'mcdata[resideprovince]': this.province,
					'mcdata[residecity]': this.city
				}
				uni.request({
					url:'http://mall.zhongzhengyicai.com/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.info.submit&app=1',
					method: 'POST',
					data: data,
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						uni.hideLoading()
						if(res.data.status ==1){
							uni.showToast({
								title: '修改成功'
							});
							setTimeout(() =>{
								uni.navigateBack();
							},300)
						}else{
							uni.showToast({
								title: res.data.result.message,
								icon:"none"
							});
						}
					},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>
<style>.list{padding:16upx 24upx;background:#fff;}.angle{position:relative;padding-right:50upx;}.angle:after{content:" ";display:inline-block;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);height:16upx;width:16upx;border-width:2upx 2upx 0 0;border-color:#b2b2b2;border-style:solid;position:absolute;top:50%;right:30upx;margin-top:-8upx;box-sizing:border-box;}.list .title{width:130upx;line-height:50upx;color:#666;}.list .flex{line-height:50upx;color:#666;padding-left:24upx;}.list .right{color:#999;}.cityp{text-align:left;font-size:28upx;background:transparent;}.cityp:after{display:none;}.bb{position:relative;}.bb:before{content:" ";position:absolute;left:20upx;right:20upx;bottom:-2upx;height:2upx;border-top:1px solid #ebebeb;color:#D9D9D9;-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scaleY(0.5);-ms-transform:scaleY(0.5);transform:scaleY(0.5);}.layout{margin-top:20upx;}</style>